<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/bind.min.css">
    <script src="js/jquery-3.1.0.min.js"></script>
    <script src="js/verification.min.js"></script>
    <script src="js/bind.min.js"></script>
</head>
<body>
    <div class="top">
        <div>
            <a href="">首页</a>
            <a href="">资讯</a>
            <a href="">题库</a>
            <div href="">网站导航</div>
        </div>
    </div>
    <div class="header"></div>
    <div class="content">
        <img src="./images/img-3.png">
        <div class="sign">
            <h2>您已成功验证了微信账号！</h2>
            <p>马上绑定网站账号，下次登录更便捷！</p>
            <div id="tab">
                <div class="active">还没有账号</div>
                <div>已经有账号</div>
            </div>
            <form id="form-1" action="">
                <div class="form-text">
                    <span><i class="icon-1"></i></span>
                    <input type="text" placeholder="请输入手机号">
                </div>
                <p>请输入正确的手机号码</p>
                <div class="form-verify">
                    <span><i class="icon-2"></i></span>
                    <input type="text" placeholder="请输入验证码">
                    <a class="s1" href="javascript:;" id="form-btn">获得验证码</a>
                </div>
                <p>您输入的验证码有误</p>
                <div class="form-text">
                    <span><i class="icon-3"></i></span>
                    <input type="password" placeholder="设置密码（8-20个字符）">
                </div>
                <p>密码不符合规范</p>
                <div class="form-text">
                    <span><i class="icon-4"></i></span>
                    <input type="password" placeholder="确认密码，请再次输入">
                </div>
                <p>确认密码的值与密码不一致</p>
                <input class="form-submit" type="submit" value="确认">
            </form>
            <form id="form-2" action="">
                <div class="form-text">
                    <span><i class="icon-1"></i></span>
                    <input type="text" placeholder="请输入手机号/邮箱">
                </div>
                <p>您输入的账号不存在！</p>
                <div class="form-text">
                    <span><i class="icon-2"></i></span>
                    <input type="password" placeholder="请输入密码">
                </div>
                <p>您输入的密码与账号不匹配</p>
                <div id="slider">
                    <div id="slider_bg"></div>
                    <span id="label"></span><span id="labelTip">拖动滑块验证</span>
                </div>
                <input class="form-submit" type="submit" value="确认">
            </form>
        </div>
    </div>
    <div class="footer">
        Copyright(C) 2013-2016 All Rights Reserved 浙ICP备09037948号 宁波海曙助才商务信息咨询有限公司
    </div>
    <script src="js/slideunlock.min.js"></script>
    <script>
    $(function () {
        var slider = new SliderUnlock("#slider",{
                successLabelTip : "验证成功"
            },function(){
                // 回调
            });
        slider.init();
    })
    </script>
</body>
</html>